<template>
  <div class="search">
    <div class="input-box">
      <div class="find"></div>

      <input
        type="text"
        v-model="keywords"
        placeholder="搜索歌曲、歌手、专辑"
        @input.stop="inputing"
        @keydown.enter="showResult"
      />

      <div
        v-if="keywords.length > 0 || keywords != ''"
        class="close"
        @click="closed"
      ></div>
    </div>

    <component
      :keywords="keywords"
      :is="componentName"
      :currentmusic="currentmusic"
      @search="search"
      @play="$emit('play', $event)"
    ></component>
    <!-- :historyNum="historyNum" -->
    <!-- @dataNum="change" -->
    <!-- <search-hot></search-hot>
    <search-result></search-result>
    <search-suggest></search-suggest> -->
  </div>
</template>

<script>
import SearchHot from "@/components/SearchHot";
import SearchResult from "@/components/SearchResult.vue";
import SearchSuggest from "@/components/SearchSuggest.vue";
export default {
  props: {
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      componentName: "SearchHot",
      keywords: "",
      // num: 0,
      // historyNum: [],
    };
  },
  components: {
    SearchHot,
    SearchResult,
    SearchSuggest,
  },
  created() {
    // this.change();
    // this.getHistoryData()
  },
  methods: {
    //输入的时候，如果输入值不为空，显示搜索提示
    inputing() {
      if (this.keywords != "" || this.keywords.length > 0) {
        this.componentName = "SearchSuggest";
      } else {
        this.componentName = "SearchHot";
      }
    },
    //按下enter键，显示搜索结果
    showResult() {
      this.componentName = "SearchResult";
      // this.num++;
      // window.sessionStorage.setItem(this.num, this.keywords);
      // this.getHistory();
    },

    search(hotword) {
      this.keywords = hotword;
      this.showResult();
    },
    closed() {
      this.keywords = "";
      this.inputing();
    },
    // getHistory() {
    //   return this.historyNum.push(window.sessionStorage.getItem(this.num));
    // },
    // change(data) {
    //   console.log(data);
    //   window.sessionStorage.removeItem(data);
    //   this.historyNum.splice(data, 1);
    // },
  },
};
</script>

<style lang="scss" scoped>
.search {
  .input-box {
    height: 35px;
    background-color: #e9e9e9;
    border-radius: 10px;
    margin: 20px 10px;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    padding: 15px 10px;
    input {
      height: 30px;
      flex: 1;
      border-radius: 10px;
      display: inline-block;
      border: none;
      outline: none;
      padding-top: 2px;
      background-color: #e9e9e9;

      &::placeholder {
        font-size: 14px;
        color: #c9c9c9;
      }
    }

    .find {
      width: 13px;
      height: 13px;
      background: url(@/assets/search.png) no-repeat;
      background-size: cover;
      margin: 0px 8px;
      display: inline-block;
    }
    .close {
      width: 30px;
      height: 30px;
      background: url(@/assets/close.png) no-repeat;
      background-size: 14px 14px;
      background-position: 50%;
    }
  }
}
</style>